<template>
    <div class="bpm-executors">
        <!--编辑-->
       <div  >
           <!-- 多选-->
           <div v-if="!single">
               <div class="bpm-executors-checkbox-head">
                   <div><a-checkbox @change="selectAllChange(selectAll)" v-model:checked="selectAll">{{i18n('taskExecutors.checkAll','全选')}}</a-checkbox></div>
                   <div class="bpm-executors-checkbox-head-delt" @click="empty"><my-icon type="iconqingchu"></my-icon>{{i18n('taskExecutors.clear','清空')}}</div>
               </div>
               <a-checkbox-group :options="userOptions" @change="selectChange"  v-model:value="selectUsers"></a-checkbox-group>
               <a class="bpm-add"  @click="openUserDialog" v-if="!readonly"><my-icon type="iconjia"></my-icon>{{i18n('taskExecutors.selectUser','选择用户')}}</a>
           </div>
           <!-- 单选-->
           <div v-else>
               <a-radio-group :options="userOptions" v-model:value="selectUser"></a-radio-group>
               <a class="bpm-add"  @click="openUserDialog" v-if="!readonly"><my-icon type="iconjia"></my-icon>{{i18n('taskExecutors.selectUser','选择用户')}}</a>
           </div>
       </div>

    </div>
</template>

<script>
import {ShareDialog} from "@lowcode/jpaas-share-component";

export default {
    name: "bpm-executors",
    emits:['update:modelValue'],
    props:{
        modelValue:{
            type: Array,
            default: () =>  []
        },
        single:{
            type:Boolean,
            default:false
        },
        filter:{
            type:Object,
            default: () => {}
        },
        readonly:{
            type:Boolean,
            default:false
        },


    },
    data(){
        return {
            userOptions:[],
            params:{single: this.single,showDimId:false},
            //多选
            selectUsers:[],
            //单选
            selectUser:"",
            selectAll:false,

            //初始用户
            initUser:[]
        }
    },
    created() {
        this.init();
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTask",key);
        },
        empty(){
            this.selectUsers=[];
            this.userOptions=[];
            this.selectAll = false;
            //保留初始化用户数据
            this.userOptions= JSON.parse(JSON.stringify(this.initUser));
            if(this.single){
                this.selectUser=this.userOptions[0].value;
            }else {
                this.userOptions.forEach(user=>{
                    this.selectUsers.push(user.value);
                })
                this.selectAll=true;
            }
        },
        init(){
            this.initFilter();
            this.initUsers();
        },
        initUsers(){
            //清空先
            this.selectUsers=[];
            this.userOptions=[];
            this.selectAll = false;
            //构建用户数组
            this.modelValue.find(user=>{
              this.userOptions.push({label:user.name, key:user.account, value:user.id});
            })
            //初始化用户数据
            this.initUser= JSON.parse(JSON.stringify(this.userOptions));
            //默认选中
            if(this.modelValue.length){
              if(this.single){
                this.selectUser=this.modelValue[0].id;
              }else {
                this.modelValue.forEach(user=>{
                  this.selectUsers.push(user.id);
                })
                this.selectAll=true;
              }
            }
        },
        initFilter(){
            if(!this.filter){
                return;
            }
            if(this.filter.orgConfig=='selOrg'){
                var groupId=JSON.parse(this.filter.group).value;
                this.params.orgconfig="selOrg";
                this.params.groupId=groupId;
            }else if(this.filter.orgConfig=='curOrg'){
                this.params.orgconfig="curOrg";
                this.params.groupId="curOrg";
            }else if(this.filter.orgConfig=='allOrg'){
                this.params.orgconfig="allOrg";
                if(!this.filter.dimId){
                    this.params.showDimId=true;
                }
                if(this.filter.groups){
                    this.params.groups=this.filter.groups;
                }
                this.params.dimId=this.filter.dimId;
                this.params.initRankLevel=this.filter.initRankLevel;
            }
        },
        openUserDialog(){
            let self_=this;
            let inUsers=[];
            this.params = this.params ? this.params : {} ;
            if(self_.single){
                var user=this.userOptions.find(item=>{
                    if(self_.selectUser==item.value){
                        return item;
                    }
                });
                if(user){
                    inUsers.push({userId:user.value,fullName:user.label});
                }
            }else {
                for (var i = 0; i < self_.selectUsers.length; i++) {
                    var user=this.userOptions.find(item=>{
                        if(self_.selectUsers[i]==item.value){
                            return item;
                        }
                    });
                    inUsers.push({userId:user.value,fullName:user.label});
                }
            }
            this.params.data=inUsers;

            var conf = {curVm: this, data: this.params, widthHeight: ['1024px', '700px'],shade: false,};
            ShareDialog.openUserDialog(conf, function (users) {
                if(self_.single){
                    self_.userOptions=[];
                    self_.userOptions.push({label:users.fullName, key:users.userNo, value:users.userId});
                    self_.selectUser=users.userId;
                }
                else{
                    var selectUsers=[];
                    for (var i = 0; i < users.length; i++) {
                        var user = users[i];
                        selectUsers.push(user.userId);
                        var res= self_.userOptions.find(item=>{
                            if(user.userId==item.value){
                                return true;
                            }
                        });
                        if(!res){
                            self_.userOptions.push({label:user.fullName, key:user.userNo, value:user.userId});
                        }
                    }
                    self_.selectUsers=selectUsers;
                }
            });
        },
        //全选变化
        selectAllChange(value){
            if(!value){
                this.selectUsers=[];
            }else{
                var selectUsers=[];
                this.userOptions.forEach(item=>{
                    selectUsers.push(item.value);
                });
                this.selectUsers=selectUsers;
            }
        },
        //多选变化
        selectChange(ary){
            if(ary.length==this.userOptions.length){
                this.selectAll=true;
            }else {
                this.selectAll=false;
            }
        },
        getSelectUser(){
            var executors=[];
            if(this.single){
                var user=this.userOptions.find(item=>{
                    if(this.selectUser==item.value){
                        return item;
                    }
                });
                executors.push({id: user.value, name: user.label, type: "user"});
            }else {
                for (var i = 0; i < this.selectUsers.length; i++) {
                    var user=this.userOptions.find(item=>{
                        if(this.selectUsers[i]==item.value){
                            return item;
                        }
                    });
                    executors.push({id: user.value, name: user.label, type: "user"});
                }
            }
            if( JSON.stringify(this.modelValue) != JSON.stringify(executors)){
                this.$emit("update:modelValue",executors);
            }
        }
    },
    watch:{
        selectUsers:{
            handler:function(val,oldval){
                this.getSelectUser();
            },
            deep:true
        },
        selectUser:{
            handler:function(val,oldval){
                this.getSelectUser();
            },
            deep:true
        },

    }
}
</script>

<style scoped>
.bpm-executors-checkbox-head{
    display: flex;
    line-height: 22px;
    height: 30px;
    border-bottom: solid 1px #c7c7c7;
    margin-bottom: 10px;
}
.bpm-executors-checkbox-head >div:nth-child(1){
    flex: 1;
}
.bpm-executors-checkbox-head-delt{
    color: #f94765;
    cursor: pointer;
}
.bpm-executors >>>.ant-checkbox-group-item{
    margin-right: 30px;
    margin-bottom: 10px;
}
.bpm-executors .bpm-add{
    display: inline-block;
    white-space: normal;
    color: #4d9eff;
    font-size: 14px;
}
</style>
